<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>

    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #canvas {
        }
    </style>
</head>
<body>

    <canvas id="canvas"></canvas>

    <script type="text/javascript" src="../build/mapv.js"></script>

    <script type="text/javascript">

        var canvas = document.querySelector('#canvas');

        canvas.width = document.body.offsetWidth;
        canvas.height = document.body.offsetHeight;

        var ctx = canvas.getContext('2d');

        var data = [
            {
                geometry: {
                    type: 'Point',
                    coordinates: [ctx.canvas.width * Math.random(), ctx.canvas.height * Math.random()]
                },
                icon:'https://huiyan.baidu.com/cms/static/images/direction_blue.png',
                fillStyle: 'red',
                size: 30
            },
            // {
            //     geometry: {
            //         type: 'Point',
            //         coordinates: [ctx.canvas.width * Math.random(), ctx.canvas.height * Math.random()]
            //     },
            //     fillStyle: 'blue',
            //     size: 20
            // },
            // {
            //     geometry: {
            //         type: 'Point',
            //         coordinates: [ctx.canvas.width * Math.random(), ctx.canvas.height * Math.random()]
            //     },
            //     fillStyle: 'rgba(255, 255, 50, 0.5)',
            //     size: 90
            // },
            {
                geometry: {
                    type: 'LineString',
                    coordinates: [
                        [ctx.canvas.width * Math.random(), ctx.canvas.height * Math.random()],
                        [ctx.canvas.width * Math.random(), ctx.canvas.height * Math.random()],
                        [ctx.canvas.width * Math.random(), ctx.canvas.height * Math.random()]
                    ]
                },
            },
        ];

        // var randomCount = 10;
        // while (randomCount--) {
        //     data.push({
        //         geometry: {
        //             type: 'Point',
        //             coordinates: [ctx.canvas.width * Math.random(), ctx.canvas.height * Math.random()]
        //         },
        //         fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)',
        //         size: Math.random() * 30 + 5
        //     });
        // }

        var dataSet = new mapv.DataSet(data);

        var options = {
            fillStyle: 'rgba(55, 50, 250, 0.3)',
            shadowColor: 'rgba(55, 50, 250, 0.8)',
            shadowBlur: 10,
            draw: 'simple',
        }

        mapv.canvasResolutionScale(ctx);

        mapv.canvasDrawSimple.draw(ctx, dataSet, options);

    </script>
	
</body>
</html>
